<template>  
  <div class="app-container">  
    <div class="section-one"> 
	  <div class="header">  
		<img class="img" src="../../static/image/moren.png" /> 
		<button class="btn" @click="goToLogin">点击登录</button>  
      </div>  
	  <div class="main-content">  
		<span>欢迎来到袁隆平杂交水稻科学园</span> 
	  </div>
	</div>
	
	<div class="section-two">
	  <div class="left-aligned-button">  
		<button class="btn" @click="showRecords">预约记录</button>  
	  </div> 
	  <img class="icon" src="../../static/image/img.png"/> 
	  <view class="no-records">
		<text>暂无预约记录</text>  
	  </view> 
	</div> 
	  <div class="footer">
		<span>技术支持：攀枝花学院</span>    
	  </div> 
  </div> 
</template>  
  
<script>  
export default {  
  methods: {  
    goToLogin() {  
      this.$router.push('/login');  
    },  
    showRecords() {  
      alert('显示预约记录');  
    },  
    goToOnlineBooking() {  
      this.$router.push('/online-booking');  
    }  
  }  
};  
</script>  
  
<style>  
.app-container {  
  display: flex;  
  flex-direction: column; 
  justify-content: center;
  align-items: center;  
  height: 95vh; /* 根据需要调整高度 */  
  padding: 20px; /* 添加一些内边距以避免内容紧贴边缘 */  
  box-sizing: border-box; /* 确保内边距不会增加总宽度 */  
  background-color: #f0f0f0; 
}  
.btn {  
  /* 移除所有背景色和边框 */  
  background-color: transparent; /* 确保背景是透明的 */  
  border-color: white; /* 移除边框 */  
  /* 添加一些内边距和外边距以改善可读性 */  
  padding: 10px 20px;  
  margin: 5px 0;  
  /* 设置文字样式 */  
  color: black; 
  font-size: 15px;  
  font-weight: bold;  
  text-align: center; /* 如果需要的话，确保文本居中 */  
  cursor: pointer; /* 鼠标悬停时显示手指指针，表明可点击 */   
}
.button:hover {  
  color: darkgray; /* 悬停时文本颜色变深灰 */  
  /* 如果需要，可以在这里添加其他悬停效果，比如背景色变化 */  
}

.left-aligned-button {  
  position: absolute; /* 绝对定位，使其脱离文档流 */  
  top: -8px; /* 顶部偏移，根据需要调整 */  
  left: 0px; /* 左侧偏移，根据需要调整 */  
} 
.img {  
  width: 50px;  
  height: 50px;  
  margin-top: -30rpx;
  margin-right: 5px;  
  text-align: center; 
} 
.icon {  
  margin-top: 180rpx;
  width: 141px;
  height: 130px;
  margin-left: 95px;
  
} 
.no-records {  
  width: 100%; /* 可选，但有助于确保文本宽度 */  
  text-align: center;
  margin-bottom: 90px;
   /* 文本居中 */  
}  

.footer {  
  position: fixed; /* 固定在页面上 */  
  bottom: 80rpx; /* 紧贴页面底部 */  
  width: 100%; /* 宽度占满整个屏幕 */  
  text-align: center; /* 文字居中显示 */  
  background-color: transparent; /* 背景色，可选 */  
  padding: 10px 0; /* 上下内边距 */  
}  
  
  
.header, .main-content {  
	  /* 可以在这里添加具体的样式 */ 
	  margin-top: 10px;
	  width: 100%; /* 确保内容宽度 */  
	  text-align: center; /* 如果需要，可以将主内容居中 */  
}  
.section-one{
	/* 为两个区域添加一些间距和样式 */
	margin-top: 90rpx;
	margin-bottom: 20px; /* 或者根据需要调整 */  
	box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 底部阴影效果 */  
	padding: 20px; /* 内部填充 */  
	border-radius: 8px; /* 边框圆角 */  
	background-color: white;
	width: 95%;
	/* 其他区域样式 */  
}
.section-two {  
  /* 为两个区域添加一些间距和样式 */ 
  position: relative; 
  margin-bottom: 80px; /* 或者根据需要调整 */  
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 底部阴影效果 */  
  padding: 20px; /* 内部填充 */  
  border-radius: 8px; /* 边框圆角 */ 
  background-color: white;
  /* 其他区域样式 */  
  width: 95%;
}  
</style> 